<template>
	<view class="task-wrap">
		<u-navbar back-text="我的" title="仪器领用" :custom-back="gotabpolice"></u-navbar>
		<view class="clomn-wrap" style="position: relative;">
			<view class="imageD" style="margin: 10px;">
				<image style="width: 100%; height: 100%;border-radius: 10rpx;"
					:src=" 'https://www.huancelian.com/azImg/' + image "></image>
			</view>
			<view class="tabContainer" style="margin-bottom: 2rpx;">
				<!-- 仪器信息 -->
				<view class="project-info">
					<view class="sample-detail">
						<text class="title">仪器名称</text>
						<text class="value">{{datainfo.name ||""}}</text>
					</view>

					<!-- 分割线 -->
					<view class="divLine"></view>
					<view class="sample-detail">
						<text class="title">仪器编号</text>
						<text class="value">{{datainfo.number ||""}}</text>
					</view>

				</view>
			</view>

			<view class="tabContainer" style="margin-bottom: 2rpx;">
				<!-- 仪器信息 -->
				<view class="project-info">
					<view class="sample-detail" @click="showsUsers = true">
						<text class="title">申领人</text>
						<text class="value">{{drawData.applyUser || ""}}</text>
						<!-- 图标 -->
						<uni-icons class="input-f-icon" type="forward" size="16" color="#c0c4cc"></uni-icons>
					</view>
					<!-- 领用人选择器 -->
					<u-select v-model="showsUsers" value-name="userId" label-name="empName" :list="listUsers"
						@confirm="sexconfirmUsers"></u-select>

					<!-- 分割线 -->
					<view class="divLine"></view>
					<view class="sample-detail" @click="changeShow">
						<text class="title">预计使用日期</text>
						<text
							class="value">{{datainfo.start || ""}}{{drawData.startDate ||""}}&nbsp;~&nbsp;{{drawData.endDate ||""}}</text>
						<!-- 图标 -->
						<uni-icons class="input-f-icon" type="forward" size="16" color="#c0c4cc"></uni-icons>
					</view>

					<!-- 日期选择器 -->
					<u-calendar v-model="show" :mode="mode" :min-date="mindate" max-date="9999"
						@change="change"></u-calendar>

					<!-- 分割线 -->
					<view class="divLine"></view>
					<view class="sample-detail" @click="taskNumber">
						<text class="title">任务单号</text>
						<text class="value" arrow="false">{{datainfo.jobId || drawData.jobId ||""}}</text>
						<!-- 图标 -->
						<uni-icons class="input-f-icon" type="forward" size="16" color="#c0c4cc"></uni-icons>
					</view>
				</view>
			</view>

			<view v-if="isLogin">
				<button class="button_login" :disabled="repair1" @click="maintenance">仪器出库</button>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				datainfo: {},
				isLogin: true,
				drawData: {
					deviceId: "",
					jobId: "",
					projectName: "",
					applyUser: "",
					startDate: "",
					endDate: ""
				},
				scanTheCode: "",
				imageHTTPS: "https://www.huancelian.com/azImg/",
				image: "",
				jobId: "",
				projectName: "",
				subDevice: "",
				datainfoData: {},
				checked: false,
				isIntactData: {
					isIntact: "1",
					id: ""
				},
				deviceId: "",
				applyUser: "",
				show: false,
				mode: 'range',
				mindate: new Date().toISOString().substring(0, 10),
				startDate: "",
				endDate: "",
				repair1: false,
				showsUsers: false,
				listUsers: [],
				selectedDate: []
			}
		},
		mounted() {
			this.sceneDevice()
			this.getUseTime()
			this.teamLeaders()
		},
		onLoad(option) {
			console.log(option)
			this.applyUser = option.empName
			this.scanTheCode = option.scanTheCode
			console.log(this.applyUser)
			this.isIntactData.id = option.id
			this.deviceId = option.id
			this.drawData.jobId = option.jobId
			this.drawData.projectName = option.projectName
			console.log("任务单号[id]", this.drawData.jobId)
			console.log("选择的任务单号[名称]", this.drawData.projectName)
			this.subDevice = option.number
			console.log("附属仪器", this.subDevice)
		},
		methods: {
			sceneDevice() {
				this.$api.sceneDevice({
					id: this.deviceId
				}, res => {
					if (res.code === 200) {
						this.datainfo = res.result || {}
						console.log("列表", this.datainfo)
						this.isIntactData.id = this.datainfo.useId
						this.drawData.applyUser = this.applyUser
						this.image = this.datainfo.image1
						if (this.datainfo.applyStatus != 3) {
							this.repair1 = false
						} else {
							this.repair1 = true
						}
					}

				})
			},
			getUseTime() {
				this.$api.getUseTime({
					deviceId: this.deviceId
				}, res => {
					if (res.code === 200) {
						this.selectedDate = res.result || {}
						console.log("已选日期", this.selectedDate)
					}
				})
			},

			changeShow() {
				this.show = true
			},
			change(e) {
				console.log(e);
				this.datainfo.start = ""
				this.drawData.startDate = e.startDate
				this.drawData.endDate = e.endDate
			},

			taskNumber() {
				wx.navigateTo({
					url: '/pages/claim/theTask/index?id=' + this.deviceId + '&jobId=' + this.drawData
						.jobId || "" + '&projectName=' + this.drawData
						.projectName || ""
				})
			},

			teamLeaders() {
				this.$api.teamLeaders({
					id: this.deviceId
				}, res => {
					if (res.code === 200) {
						this.listUsers = res.result || {}
						console.log("人员", this.list)
					}

				})
			},
			sexconfirmUsers(e) {
				console.log(e);
				this.drawData.applyUser = e[0].label
				// this.drawData.applyUser = e[0].value
			},
			maintenance() {
				this.$api.drawData({
					deviceId: this.deviceId,
					jobId: this.jobId,
					projectName: this.projectName,
					applyUser: this.drawData.applyUser,
					startDate: this.drawData.startDate,
					endDate: this.drawData.endDate
				}, res => {
					if (res.code === 200) {
						this.$common.successToShow("出库成功")
						this.detail()
						this.repair1 = false
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			gotabpolice() {
				wx.reLaunch({
					url: '/pages/mine/index?id=' + this.deviceId + "&scanTheCode=" + this.scanTheCode
				})
			},
		}
	}
</script>

<style scoped>
	.imageD {
		width: 712rpx;
		height: 712rpx;
		display: inline-block;
		box-sizing: border-box;
		left: 0rpx;
		top: 0rpx;
		position: relative
	}

	.tabContainer {
		overflow-x: hidden;
		width: 100%;
		/* height: 100%; */
		padding-bottom: 15rpx;
		padding-left: 27rpx;
		padding-right: 20rpx;
	}

	.project-info {
		/* height: 280rpx; */
		width: calc(100%-98rpx);
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-top: 5rpx;
		padding-right: 49rpx;
		padding-bottom: 20rpx;
		border-radius: 19rpx;
	}

	.sample-detail {
		margin-top: 10rpx;
		font-size: 25rpx;
		height: 40rpx;
		display: flex;
		align-items: center;

	}

	.sample-detail .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 200rpx;
		padding-left: 30rpx;
	}

	.sample-detail .value {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sample-detail1 {
		margin-top: 10rpx;
		font-size: 25rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	.sample-detail1 .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 250rpx;
		padding-left: 40rpx;
	}

	.sample-detail1 .value1 {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 30%;
		display: inline-block;
		padding-left: 180rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*分割线样式*/
	.divLine {
		background: #eff1e9;
		width: 100%;
		height: 1rpx;
		margin: 20rpx;
	}

	.button_login {
		margin-top: 20rpx;
		display: block;
		width: 140px;
		height: 40px;
		padding-left: 30rpx;
		padding-top: 0rpx;
		font-size: 16px;
		background-color: #193566;
		color: #fff;
		letter-spacing: 2rpx;
	}

	.task-wrap {
		/* display: block; */
		width: 100%;
		height: 125%;
	}
</style>